<template>
  <div style="display: flex;flex-direction: column;align-items: center;padding: 20px 30px;">
    <div style="width: 100%;">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="企业信息" name="first">
          <span slot="label"><i class="el-icon-date"></i> 企业信息</span>
          <div style="padding-right: 30px;">
            <el-form :model="formData" ref="formData" name="basic" label-width="120px" autocomplete="off">

              <el-form-item label="企业名称:" name="companyName">
                <span>{{ formData.companyName }}</span>
              </el-form-item>

              <el-row :gutter="15">
                <el-col :span="9">
                  <el-form-item label="企业简称:" name="companyShort">
                    <span>{{ formData.companyShort }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="营业执照代码:" name="credCode">
                    <span>{{ formData.credCode }}</span>
                  </el-form-item>
                </el-col>

              </el-row>
              <!-- <el-row>
                <el-col :span="9">
                  <el-form-item label=":" name="zoneNo">
                    <el-input v-model="formData.zoneNo" />
                  </el-form-item>
                </el-col>
              </el-row> -->
              <el-row :gutter="15">
                <!-- <el-col :span="9">
                  <el-form-item label="营业执照代码:" name="credCode">
                    <el-input v-model="formData.credCode" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="9">
                  <el-form-item label="主要负责人:" name="adminName">
                    <el-input v-model="formData.headName" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="主要负责人电话:" name="adminName">
                    <el-input v-model="formData.headPhone" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="安全管理员:" name="adminName">
                    <el-input v-model="formData.adminName" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="安全管理员电话:" name="adminName">
                    <el-input v-model="formData.adminPhone" />
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="9">
                  <el-form-item label="地块:" name="zoneNo">
                    <el-input v-model="formData.zoneNo" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="楼栋:" name="buildNo">
                    <el-input v-model="formData.buildNo" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="楼层:" name="floor">
                    <el-input v-model="formData.floor" />
                  </el-form-item>
                </el-col> -->

              </el-row>
              <el-form-item label="企业LOGO:">
                <el-upload class="avatar-uploader"   
                action="https://jsonplaceholder.typicode.com/posts/" :http-request="handleUploadLogo"
                  :show-file-list="false" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>

              </el-form-item>


              <el-form-item label="营业执照:" name="credCode">
                <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="handleUpload1" :show-file-list="false">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </el-form-item>
              <el-row :gutter="15" v-if="formData.fileUrl">
                <el-col :span="9">
                  <el-form-item label="营业执照下载:" name="fileUrl">
                    <div @click="clickDownload" style="cursor: pointer;">
                      <span style="margin-right: 10px;">{{ formData.fileName }}</span>
                      <i class="el-icon-download"></i>
                    </div>

                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>

          </div>

        </el-tab-pane>
        <el-tab-pane label="账号信息" name="second">
          <el-form :model="formData" name="basic" label-width="120px" autocomplete="off">
            <el-form-item label="企业名称:" name="companyName">
              <span>{{ formData.companyName }}</span>
            </el-form-item>

            <el-row :gutter="15">

              <el-col :span="9">
                <el-form-item label="企业账号">
                  <el-input v-model="formData.userName" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="9">
                <el-form-item label="账号密码">
                  <div style="display: flex;">
                    <el-input v-model="formData.password" show-password style="flex: 1;"
                      :disabled="user.roleName !='company' && user.userId != formData.companyName" />
                    <el-button type="primary" icon="el-icon-top-left" v-if="user.roleName !='company'">重置密码</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px;">
        <el-button @click="handleCancel">返回</el-button>
        <el-button type="primary" @click="handleOk">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryCompanyInfo,
    updateCompany,
    uploadFile,
    resetPassword,
    uploadLogo
  } from '@/service/company';
  import { updateUserNameAndPassword } from '@/service/user';

  import { getCurrUser,file_prefix } from '@/common/constants';
  import { downloadFile } from '@/common/download';

  export default {
    components: {},
    props: {},
    data() {
      return {
        user: {},
        activeName: 'first',
        formRef: null,
        formData: {},
        visible: false,
        companyName: '',
        isCurrent: false,
        isSaving: false,
        imageUrl: '',
        file_prefix
      };
    },
    mounted() {
      this.companyName = this.$route.params.companyName;
      this.user = getCurrUser();
      this.isCurrent = this.user.userId == this.companyName;

      this.loadCompanyInfo();
    },
    methods: {
      async loadCompanyInfo() {
        const res = await queryCompanyInfo({ companyName: this.companyName });
        if (res.data) {
          this.formData = res.data;
          // Object.assign(, );
          this.imageUrl = res.data.logoUrl
        }
      },

      handleCancel() {
        this.$router.back();
      },
      clickDownload() {
        console.log('this.formData.fileUrl', this.formData.fileUrl);
        downloadFile(this.formData.fileUrl);
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return  isLt2M;
      },
      getFD(fileObj) {
        const formData = new FormData();
        formData.append('file', fileObj.file);
        return formData;
      },

      async handleUpload1(params) {
        const fd = this.getFD(params);
        fd.append('companyName', this.companyName);
        let res = await uploadFile(fd);
        if (res.success) {
          this.loadCompanyInfo();
        }
        return false;
      },
      async handleUploadLogo(params) {
        const fd = this.getFD(params);
        fd.append('companyName', this.companyName);
        let res = await uploadLogo(fd);
        if (res.success) {

          this.loadCompanyInfo();
        }
        return false;
      },

      

      handleOk() {
        // if (1 == 1) {
        //   console.log('activeName', this.activeName);
        //   return;
        // }
        this.isSaving = true;

        if ('second' == this.activeName) {
          this.saveUserInfo();
        } else {
          this.saveData();
        }
        this.isSaving = false;
      },
      async saveUserInfo() {
        let res = null;
        const req = Object.assign(
          { userId: this.formData.companyName },
          this.formData
        );
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await updateUserNameAndPassword(req);
        if (res.success) {
          this.loadCompanyInfo();
          this.$message.success('保存成功！');
        } else {
          this.$message.error(res.rtn_message);
        }
      },

      async saveData() {
        let res = null;
        const req = Object.assign({}, this.formData);
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await updateCompany(req);
        if (res.success) {
          this.loadCompanyInfo();
          this.$message.success('保存成功！');
        } else {
          this.$message.error(res.rtn_message);
        }
      },
    },
  };
</script>
<style scoped>
  >>>.el-form-item__content {
    text-align: start;
  }

  >>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  >>>.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  >>>.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  >>>.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>